<template>
  <div class="generated-container">
    <!-- 可滚动内容区 -->
    <div class="scrollable-content">
      <div v-for="(item, index) in filteredData" :key="index" :style="getItemStyle(item)">
        <!-- 显示文本内容 -->
        <div v-if="item.type === 'text'" v-html="item.content"></div>
        <!-- 显示图片内容 -->
        <img
          v-else-if="item.type === 'img' && item.content"
          :src="staticService(item.content)"
          style="max-width: 100%; height: auto; display: block;"
        />
      </div>
    </div>

    <!-- 悬浮内容 -->
    <div v-for="(item, index) in floatingItems" :key="index + '_floating'" :style="getFloatingItemStyle(item)">
      <!-- 显示文本内容 -->
      <div v-if="item.type === 'text'" v-html="item.content"></div>
      <!-- 显示图片内容 -->
      <img
        v-else-if="item.type === 'img' && item.content"
        :src="staticService(item.content)"
        style="max-width: 100%; height: auto; display: block;"
      />
    </div>
  </div>
</template>
<script setup lang="ts">
// 定义 props
import { PageModeContent } from '@/api/bus/jqtSpreadLink/types';
import { staticService } from '@/utils/ruoyi';
import { ImageTextModeVo } from '@/views/bus/jqtSpreadLink/mode/imageTextMode.vue';
const props = withDefaults(defineProps<{
  data?: PageModeContent;
}>(), {
  data: () => ({})
});
const param = ref<ImageTextModeVo[]>([]);
onMounted(() => {
  param.value = props.data.imageText as ImageTextModeVo[];
});

// 计算属性：只显示在滚动区的“正常位置”内容，排除悬浮项
const filteredData = computed(() =>
  param.value.filter(item =>
    item &&
    item.type &&
    (item.type === 'text' || (item.type === 'img' && item.content)) &&
    !['1', '2', '3', '4'].includes(item.contentPosition || '')
  )
);

// 计算属性：只显示悬浮内容
const floatingItems = computed(() =>
  param.value.filter(item =>
    ['1', '2', '3', '4'].includes(item.contentPosition || '')
  )
);
// 获取每个项目的样式
function getItemStyle(item: ImageTextModeVo): Record<string, string> {
  if (!['0'].includes(item.contentPosition || '')) return {};
  return {
    display: 'inline-block'
  };
}

// 获取悬浮项目的样式
const getFloatingItemStyle = (item: ImageTextModeVo): Record<string, string> => {
  switch (item.contentPosition) {
    case '1': // 顶部悬浮
      return {
        position: 'fixed',
        top: '5%',
        left: '50%',
        transform: 'translateX(-50%)',
        maxWidth: '100%',
        height: 'auto',
        zIndex: '1000'
      };
    case '2': // 底部悬浮
      return {
        position: 'fixed',
        bottom: '10%',
        left: '50%',
        transform: 'translateX(-50%)',
        maxWidth: '100%',
        height: 'auto',
        zIndex: '1000'
      };
    case '3': // 左侧悬浮
      return {
        position: 'absolute',
        top: '20%',
        left: '10px',
        transform: 'translateY(-50%)',
        maxWidth: '60px',
        height: 'auto',
        zIndex: '2'
      };
    case '4': // 右侧悬浮
      return {
        position: 'absolute',
        top: '20%',
        right: '10px',
        transform: 'translateY(-50%)',
        maxWidth: '60px',
        height: 'auto',
        zIndex: '2'
      };
    default:
      return {};
  }
}
</script>
<style scoped lang="scss">
/* 主容器样式 */
.generated-container {
  position: relative; /* 设置相对定位，作为绝对和固定定位元素的参考 */
  width: 100%; /* 宽度占满父元素 */
  min-height: 200px; /* 最小高度确保有足够空间显示内容 */
  padding: 2px; /* 内边距提供一些空白 */
  box-sizing: border-box; /* 确保内边距不会增加元素的实际宽度 */
}

/* 可滚动区域样式 */
.scrollable-content {
  width: 100%; /* 占满整个主容器宽度 */
  height: 100%; /* 高度占满主容器 */
  overflow-y: auto; /* 当内容超出时启用垂直滚动 */
  -webkit-overflow-scrolling: touch; /* 改善移动设备上的滚动体验 */
  padding: 10px; /* 内边距提供一些空白 */
}
</style>
